<template>
	<view class="all">
		<!-- 搜索 -->
		<!-- 	<view class="screen_box">
			<view class="screen_all">
				<view class="other_phone_box">
					<u-icon name="search" size="26" color="#909399"></u-icon>
					<u-input v-model="screenPhone" type="text" :clearable="false" placeholder="搜索你想要的设备..."
						placeholder-style="font-size: 24rpx; color: #c0c4cc;" height="58"  style="margin-left: 15rpx;">
					</u-input>
				</view>
				<view class="screen_btn_box">
					<view class="screen_btn" @click="handlerFilter">
						搜索
					</view>
				</view>
			</view>
		</view> -->
		<view class="swiper_box">
			<!-- 是否开启3D  :effect3d="true" -->
			<u-swiper :list="swiperList" height="300" border-radius="35" :effect3d="false" @click="handleGo"></u-swiper>
		</view>
		<view>
			<view class="hot_package_box">
				<view class="hot_package_box_left">
					<view class="hot_package_line"></view>
					<view class="hot_package_title">宽带产品</view>
				</view>
				<view class="hot_package_box_right" @click="screen">
					<image src="/static/home/icon-screen.png" mode="" class="sore_icon"></image>
				</view>
			</view>
			<!-- 选择服务 -->
			<view class="home_service_box">
				<view
					class="service_product_box"
					v-for="(item, index) in topChooseList"
					:key="item.operator_id"
					:class="[isActive == item.operator_id ? 'service_product_box_active' : '']"
					@click="handlerService(item, index)"
				>
					<view class="product_img_box">
						<image :src="item.image" mode="" class="product_img"></image>
					</view>
					<view class="product_title">{{ item.name }}</view>
				</view>
			</view>
			<view class="home_package_box" v-for="(item, index) in packageList" :key="index">
				<view class="home_package_all">
					<view class="package_all_box" @click="handlerCheckDetails(item)">
						<image :src="item.cover_img" mode="" class="package_all_img"></image>
					</view>
					<view class="package_all_con">
						<view class="package_title" @click="handlerCheckDetails(item)">
							{{ item.name }}
						</view>

						<view class="pacakge_tip_box" v-if="item.tag_ids" @click="handlerCheckDetails(item)">
							<view
								class="pacakge_tip_all"
								:style="{ color: itemTag.font_color, border: `1px solid ${itemTag.background_color}` }"
								v-for="(itemTag, indexTag) in item.tag_ids"
								:key="indexTag"
							>
								{{ itemTag.tag }}
							</view>
						</view>

						<view class="package_flow_box" @click="handlerCheckDetails(item)">
							<p class="package_flow">
								{{ item.mini_text }}
							</p>
						</view>
						<!-- <view style="font-size: 32rpx; font-weight: bold">￥{{ item.price }}</view> -->
						<view class="package_center_box" @click="handlerCheckDetails(item)">
							<view class="package_center_tab" v-for="(ite, ind) in tabList" :key="ind">
								{{ ite }}
							</view>
						</view>
						<view class="package_bottom_box">
							<view class="package_yj_box" @click="handlerCheckDetails(item)">
								<span class="yj_box_title">佣金：</span>
								<span class="yj_box_yj">￥{{ item.yj }}</span>
							</view>
							<!-- <view class="check_btn" @click="handlerCheckDetails(item)">查看详情</view> -->
							<view class="package_btn" @click="handlerPackage(item)">立即分享</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 到底啦 -->
			<view class="bottom_box" v-if="pageObj.pageNow == total">----- 暂无更多数据 -----</view>
			<view class="bottom_box" v-if="packageList.length == 0">----- 暂无数据 -----</view>

			<!-- 公众号二维码弹窗 -->
			<u-popup v-model="showOfficialAccount" mode="center" border-radius="12">
				<view class="popup_official_box">
					<canvas style="width: 100%; height: 100%" canvas-id="code">
						<img :src="officialAccountImg" alt="" class="popup_official_img" />
					</canvas>
				</view>
				<view class="popup_official_title">请先关注公众号</view>
			</u-popup>

			<!-- 产品知识库弹窗 -->
			<u-popup v-model="showKnowledgeBase" mode="center" :closeable="true" close-icon-color="#000" border-radius="12" width="680" height="1000">
				<view class="" style="padding: 90rpx 20rpx 50rpx">
					<u-parse :html="knowledgeDetail"></u-parse>
				</view>
			</u-popup>

			<!-- 分享弹窗 -->
			<u-popup v-model="showPopupShare" mode="center" border-radius="12" z-index="1" @close="handleCloseShare">
				<view class="popup_share_box">
					<view class="share_img_box">
						<canvas style="width: 100%; height: 100%" canvas-id="code">
							<img :src="promotionImg" alt="" class="share_img" />
						</canvas>
						<!-- <image :src="promotionImg" mode="" class="share_img"></image> -->
					</view>
					<view class="share_btn_box">
						<view class="share_btn_all" v-if="isShowSaveBtn" @click="handleShare('保存本地')">
							<view class="share_btn_img">
								<image src="/static/home/icon-save.png" mode="" class="btn_img"></image>
							</view>
							<view class="share_btn_title">保存本地</view>
						</view>

						<view class="share_btn_all" @click="handleShare('复制链接')">
							<view class="share_btn_img">
								<image src="/static/home/icon-copy.png" mode="" class="btn_img"></image>
							</view>
							<view class="share_btn_title">复制链接</view>
						</view>
					</view>

					<view class="save_image_title" v-if="isShowSaveTitle">长按可保存图片</view>
				</view>
			</u-popup>
			<!-- 立即分享海报 -->
			<beautiful-product-share ref="refBeautifulShare" :beautifulPoster="beautifulPoster" @handleCloseBeautifulShare="handleCloseBeautifulShare" />
			<!-- 套餐详情 -->
			<details-poster ref="refdetailsPoster" :detailsPosterInfo="detailsPosterInfo" @handleClosedetailsPoster="handleClosedetailsPoster" />
			<!-- 筛选弹窗 -->
			<sort-popup ref="refSort" @screenClick="screenClick" />
		</view>
	</view>
</template>

<script>
import BeautifulProductShare from './components/beautifulProductShare.vue';
import detailsPoster from './components/detailsPoster.vue';
import SortPopup from './components/sortPopup.vue';
export default {
	components: {
		BeautifulProductShare,
		detailsPoster,
		SortPopup
	},
	data() {
		return {
			screenArea: '',
			swiperList: [],
			type: '',
			pageObj: {
				pageNow: 1,
				pageSize: 10
			},
			total: null,
			packageList: [],
			isShowAge: null,
			showOfficialAccount: false,
			showKnowledgeBase: false,
			knowledgeDetail: '',
			officialAccountImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/lunbo_image/660ccdfd97e61_1712115197.jpg',
			promotionImg: '',
			promotionSahreImg: '',
			promotionSahreUrl: '',
			showPopupShare: false,
			isShowSaveBtn: true,
			tabList: ['免费邮', '正品保证'],
			beautifulPoster: {},
			detailsPosterInfo: {},
			topChooseList: [],
			isActive: ''
		};
	},
	onLoad(options) {
		this.getBanner();
		this.getPackageType();
		this.type = options.type;
		this.getPackageList();
		this.isWeixin = this.isWechat();
		if (this.isWeixin == true) {
			this.isShowSaveBtn = false;
			this.isShowSaveTitle = true;
		} else {
			this.isShowSaveBtn = true;
			this.isShowSaveTitle = false;
		}
		if (this.pageObj.pageNow == this.total) {
			return;
		}
	},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getPackageList();
		} else if (this.pageObj.pageNow == this.total) {
			return;
		}
	},
	methods: {
		// 获取套餐分类
		getPackageType() {
			this.$request(
				'/api/getTypeListFront',
				{
					status: '0'
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.push({
						image: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9a8f733989_1722394871.png',
						name: '全部',
						operator_id: ''
					});
					this.topChooseList = res.data.reverse();
					this.topChooseList.forEach((item, index) => {
						if (item.name == '秒返专区') {
							this.topChooseList.splice(index, 1);
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取banner
		getBanner() {
			this.swiperList = [];
			this.$request('/api/getLbListFront', {}, 'GET').then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						if (item.type == 1) {
							this.swiperList.push({
								image: item.img,
								id: item.id,
								url: item.url
							});
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		//方法：用来判断是否是微信内置的浏览器
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
		},
		// 筛选
		screen() {
			this.$refs.refSort.showSort = true;
		},
		screenClick(val) {
			this.pageObj.pageNow = 1;
			this.packageList = [];
			this.total = 0;
			this.screenArea = val;
			this.getPackageList();
			this.$refs.refSort.showSort = false;
		},

		// 获取设备列表
		getPackageList() {
			this.$request(
				// '/api/getBroadbandListFront',
				'/api/getAgentKdSmallshopPackageAllN',
				{
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize,
					agent_id: uni.getStorageSync('h5-userInfo').agent_id ? uni.getStorageSync('h5-userInfo').agent_id : uni.getStorageSync('h5-userInfo').id,
					belonging_place: this.screenArea,
					operator_id: this.isActive
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						this.packageList.push(item);
					});

					this.total = res.page_info.page_count;
					this.userToken = uni.getStorageSync('h5-token');
					uni.stopPullDownRefresh();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 是否需要关注公众号
		getFxuserIsFollow() {
			this.$request('/api/getFxuserIsFollow', {}, 'GET').then((res) => {
				if (res.code == 1) {
					if (res.data == 0) {
						// 不用关注
						this.getOncePackageShareImg();
						this.showPopupShare = true;
					} else {
						// 要关注
						this.getFxuserIsSubscribe();
					}
				} else {
					uni.showToast({
						title: '获取失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取套餐二维码
		getOncePackageShareImg() {
			const timestamp = new Date().getTime();
			this.$request(
				'/api/getPackageFxPoster',
				{
					package_id: this.packageId,
					type: '1' // h5:1，微信小程序：2
					// poster_id: '0',
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					uni.hideLoading();
					this.promotionImg = res.data + '?v=' + timestamp;
					this.promotionSahreImg = res.data;
					this.promotionSahreUrl = res.url;
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 是否关注公众号
		getFxuserIsSubscribe() {
			this.$request('/api/getFxuserIsSubscribe', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.isFollow = res.data;
					if (this.isFollow == false) {
						this.showOfficialAccount = true;
					} else {
						uni.showLoading({
							title: '正在加载中'
						});
						// this.packageId = val.id
						// this.packageDetailObj = val
						// this.getOncePackageLink()
						this.getOncePackageShareImg();
						this.showPopupShare = true;
					}
				} else {
					this.showOfficialAccount = true;
					return;
				}
			});
		},

		// 关闭靓推广弹窗
		handleCloseBeautifulShare() {
			this.$refs.refBeautifulShare.isShowBeautifulShare = false;
		},
		handleClosedetailsPoster() {
			this.$refs.refdetailsPoster.isShowBeautifulShare = false;
			this.$refs.refBeautifulShare.isShowBeautifulShare = false;
		},
		getPrettyPoster(val) {
			this.$request('/api/getBroadbandFxPoster?type=1&package_id=' + val.id + '&poster_id=' + 63, {}, 'GET').then((res) => {
				uni.hideLoading();
				if (res.code == 1) {
					this.beautifulPoster = res;
					this.$refs.refBeautifulShare.isShowBeautifulShare = true;
				} else {
					uni.showToast({
						title: '获取靓号小店海报失败',
						icon: 'none'
					});
					return;
				}
			});
		},
		getdetailsPoster(val) {
			// this.$request('/api/getIotGoodsPackageDetail?goods_id=' + val.id, {}, 'GET').then((res) => {
			// 	this.detailsPosterInfo = res;
			// });
		},

		// 查看详情
		handlerCheckDetails(val) {
			uni.navigateTo({
				url: '/pages/broadband/checkBroadbandDetail?id=' + val.id
			});
		},

		// 点击立即推广
		handlerPackage(val) {
			this.getPrettyPoster(val);
		},

		// 分享
		handleShare(val) {
			const that = this;
			if (val == '保存本地') {
				let systemInfo = uni.getSystemInfoSync();
				let platform = systemInfo.platform;

				if (platform === 'ios') {
					this.downloadImageIos(this.promotionSahreImg, 'my-image-ios');
					// iOS 设备的代码逻辑
				} else if (platform === 'android') {
					this.downloadImage(this.promotionSahreImg, 'my-image');
					// 安卓设备的代码逻辑
				} else {
					console.log('未知设备平台');
				}
			} else if (val == '复制链接') {
				let url = that.promotionSahreUrl;
				let oInput = document.createElement('input');
				oInput.value = url;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象;
				document.execCommand('Copy'); // 执行浏览器复制命令
				// 复制成功提示;
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 2000
				});
				oInput.remove();
			}
		},

		save() {
			uni.getImageInfo({
				src: this.promotionImg,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.path,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'error'
							});
						}
					});
				}
			});
		},
		handlerFilter() {
			// location.href = 'weixin://dl/business/?t=4Rr7wFOQMIm'
		},

		downloadImage(url, name = 'image.png') {
			fetch(url)
				.then((response) => response.blob())
				.then((blob) => {
					const a = document.createElement('a');
					const url = window.URL.createObjectURL(blob);
					a.href = url;
					a.download = name;
					a.click();
					s;
					window.URL.revokeObjectURL(url);
				});
		},

		// 兼容ios
		downloadImageIos(url, name = 'image.png') {
			const a = document.createElement('a');
			a.href = url; // 图片的 URL
			a.download = name; // 图片下载后的文件名
			a.style.display = 'none';
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
		},

		// 关闭分享弹窗清空图片字段
		handleCloseShare() {
			this.promotionImg = '';
		},
		
		// 点击服务
		handlerService(val, index) {
			this.pageObj.pageNow = 1;
			this.packageList = [];
			this.isActive = val.operator_id;
			this.getPackageList();
		}
	}
};
</script>

<style scoped lang="scss">
.all {
	// background-color: #f8f8f8;
}
.screen_box {
	// background: #FFFFFF;
	.screen_all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 4px;
		padding: 18rpx 24rpx 18rpx 28rpx;
		.other_phone_box {
			// margin: 0 18rpx 18rpx 0;
			padding: 0 17rpx;
			display: flex;
			width: 70vw;
			background: #fff;
			border-radius: 15rpx;
		}

		.screen_btn_box {
			width: 20vw;
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 100rpx;
			height: 58rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #282828;
			background: #fffffe;
			border-radius: 15rpx;
			border: 1rpx solid #e2eaef;

			// .screen_btn {
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	width: 100rpx;
			// 	height: 60rpx;
			// 	font-size: 24rpx;
			// 	font-weight: 500;
			// 	color: #282828;
			// 	background: #fffffe;
			// 	border-radius: 8rpx;
			// 	border: 1px solid #ecf4fc;
			// }
		}
	}

	// 	.screen_other_box {
	// 		display: flex;
	// 		flex-wrap: wrap;
	// 		width: 100%;
	// 		padding: 0 24rpx 18rpx 28rpx;

	// 	}
}
// 轮播图
.swiper_box {
	padding: 18rpx 25rpx 18rpx 28rpx;
}
// 商品列表
.hot_package_box {
	display: flex;
	justify-content: space-between;
	margin: 0 20rpx;

	.hot_package_box_left {
		display: flex;
		align-items: center;

		.hot_package_line {
			width: 9rpx;
			height: 33rpx;
			background: #4f96ff;
			box-shadow: 0px 0px 8rpx 0px rgba(242, 242, 242, 0.36);
			border-radius: 5rpx;
		}

		.hot_package_title {
			padding-left: 33rpx;
			font-family: all-font;
			font-weight: bold;
			font-size: 34rpx;
			color: #1a1a1a;
		}
	}

	.hot_package_box_right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70rpx;
		height: 70rpx;
		// background: #fff;
		border-radius: 12rpx;
		margin-left: 10rpx;

		.sore_icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.home_service_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8rpx;
	padding: 15rpx 44rpx 15rpx;

	.service_product_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.product_img_box {
			width: 68rpx;
			height: 68rpx;

			.product_img {
				width: 100%;
				height: 100%;
			}
		}

		.product_title {
			font-size: 26rpx;
			font-weight: 400;
			font-family: all-font;
			color: #333;
		}
	}

	.service_product_box_active {
		display: flex;
		flex-direction: column;
		align-items: center;

		.product_img_box {
			width: 68rpx;
			height: 68rpx;

			.product_img {
				width: 100%;
				height: 100%;
			}
		}

		.product_title {
			font-size: 26rpx;
			font-family: all-font;
			font-weight: 400;
			color: #4f96ff;
		}
	}
}

.home_package_box {
	position: relative;
	// width: 100%;
	background: #ffffff;
	box-shadow: 0px 6rpx 6rpx 1px #ececec;
	border-radius: 16rpx;
	border: 1px solid #f5f5f5;
	margin-bottom: 12rpx;
	padding: 25rpx 16rpx 22rpx 20rpx;
	margin: 20rpx 20rpx;

	.home_package_all {
		display: flex;
		width: 100%;
		// 		.package_top_img {
		// 			position: absolute;
		// 			top: 0;
		// 			left: 22rpx;
		// 			width: 44rpx;
		// 			height: 61rpx;
		// 			z-index: 998;

		// 			.top_img {
		// 				width: 100%;
		// 				height: 100%;
		// 			}
		// 		}

		.package_all_box {
			width: 214rpx;
			height: 214rpx;
			margin-right: 23rpx;

			.package_all_img {
				width: 214rpx;
				height: 214rpx;
			}
		}

		.package_all_con {
			width: 421rpx;

			.package_title {
				font-family: all-font;
				font-weight: bold;
				font-size: 32rpx;
				color: #1a1a1a;
				overflow: hidden; //多出的隐藏
				text-overflow: ellipsis; //多出部分用...代替
				display: -webkit-box; //定义为盒子模型显示
				-webkit-line-clamp: 1; //用来限制在一个块元素显示的文本的行数
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
			}

			.pacakge_tip_box {
				display: flex;
				flex-wrap: wrap;
				padding-top: 10rpx;

				.pacakge_tip_all {
					font-family: all-font;
					padding: 0 6rpx;
					border-radius: 6rpx;
					margin: 0 6rpx 6rpx 0;
				}

				.package_tip_free {
					background: #ffe8d6;
					color: #ff7b0c;
					font-size: 24rpx;
					padding: 3rpx 4rpx;
					margin-right: 20rpx;
				}

				.package_tip_official {
					background: #e4ffe8;
					color: #2fc247;
					font-size: 24rpx;
					padding: 3rpx 4rpx;
				}
			}

			.package_tip {
				font-family: all-font;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin: 16rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.package_flow_box {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				.package_flow {
					color: #666666;
					font-size: 24rpx;
					// line-height:35rpx;
					overflow: hidden; //多出的隐藏
					text-overflow: ellipsis; //多出部分用...代替
					display: -webkit-box; //定义为盒子模型显示
					-webkit-line-clamp: 1; //用来限制在一个块元素显示的文本的行数
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				}
			}

			.package_commission {
				font-family: all-font;
				font-weight: 500;
				font-size: 26rpx;
				color: #f4281d;
				padding-top: 25rpx;
			}
		}
	}

	.package_center_box {
		display: flex;
		align-items: center;
		margin-top: 18rpx;
		.package_center_tab {
			margin-right: 12rpx;
			padding: 11rpx 14rpx 13rpx 13rpx;
			background-color: #e2ecff;
			color: #333;
			font-size: 22rpx;
			border-radius: 10rpx;
		}
	}

	.package_bottom_box {
		display: flex;
		// justify-content: flex-end;
		justify-content: space-between;
		padding-top: 20rpx;
		.package_yj_box {
			.yj_box_title {
				font-size: 24rpx;
			}
			.yj_box_yj {
				font-size: 30rpx;
				font-weight: 550;
				color: #f4281d;
			}
		}
		.check_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 141rpx;
			height: 49rpx;
			background: linear-gradient(145deg, #3b64b6, #203a71);
			border-radius: 25rpx;
			font-family: button-font;
			font-weight: 400;
			font-size: 25rpx;
			color: #ffffff;
			margin-right: 20rpx;
		}

		.package_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 155rpx;
			height: 53rpx;
			background: linear-gradient(to right, #ffeabf, #ffd391, #ffc97d);
			border-radius: 27rpx;
			font-family: all-font;
			font-weight: 600;
			font-size: 27rpx;
			color: #c00000;
		}
	}

	.home_package_other {
		padding-top: 16rpx;
		margin-top: 26rpx;
		border-top: 1px solid #f5f5f5;

		.handle_age_box:last-child {
			padding-bottom: 0;
		}

		.handle_age_box {
			display: flex;
			padding-bottom: 17rpx;

			.age_icon_box {
				width: 26rpx;
				height: 26rpx;
				margin-right: 15rpx;

				.age_icon {
					width: 100%;
					height: 100%;
				}
			}

			.age_title {
				width: 632rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
}

.bottom_box {
	text-align: center;
	color: #ccc;
	padding: 30rpx 0 20rpx;
}

.popup_official_box {
	width: 550rpx;
	height: 550rpx;

	.popup_official_img {
		width: 100%;
		height: 100%;
	}
}

.popup_official_title {
	font-size: 28rpx;
	text-align: center;
	padding: 0 0 20rpx;
}

.popup_share_box {
	.share_img_box {
		width: 550rpx;
		height: 930rpx;

		.share_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
			-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
		}
	}

	.share_btn_box {
		display: flex;
		justify-content: space-evenly;
		padding: 16rpx 0;

		.share_btn_all {
			display: flex;
			flex-direction: column;
			align-items: center;

			.share_btn_img {
				width: 72rpx;
				height: 72rpx;

				.btn_img {
					width: 100%;
					height: 100%;
				}
			}

			.share_btn_title {
				font-family: all-font;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				padding-top: 6rpx;
			}
		}
	}

	.save_image_title {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: red;
		text-align: center;
		padding-bottom: 20rpx;
	}
}

::v-deep .u-drawer {
	z-index: 999 !important;
}
</style>
